<template>
  <div class="container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="商品信息" name="first">
        <div class="app-row m-20-t">
          <span class="title bold width-100 align-right">商品名称:</span>
          <el-input v-model="name_value" class="flex-1" />
        </div>
        <div class="m-20-t">
          <div class="app-row">
            <span class="title bold width-100 align-right">关键词:</span>
            <el-input v-model="keyword_value" class="flex-1" />
          </div>
          <div class="annotation m-10-t m-114-l">
            <span>每个关键词最长为15个字符，必须以","(逗号)分隔符</span>
          </div>
        </div>
        <div class="app-row m-30-t">
          <span class="title bold width-100 align-right">所属门店:</span>
          <el-select v-model="shop_value" class="flex-1" placeholder="请选择" @change="choose_shop">
            <el-option
              v-for="item in shop_list"
              :key="item.id"
              :value="item.id"
              :label="item.true_name"
            />
          </el-select>
        </div>
        <el-button type="primary" class="m-114-l m-10-t">添加机构</el-button>
        <div class="app-row m-30-t">
          <span class="title bold width-100 align-right">所属分类:</span>
          <el-button icon="el-icon-menu" type="success" @click="setting_classify">设置分类</el-button>
          <el-button icon="el-icon-plus" type="warning">添加新分类</el-button>
        </div>
        <div class="m-50-t">
          <div class="app-row">
            <span class="title bold width-100 align-right">是否上架:</span>
            <el-radio v-model="putaway_radio" :label="0">否</el-radio>
            <el-radio v-model="putaway_radio" :label="1">是</el-radio>
          </div>
          <div class="annotation m-10-t m-114-l">
            <span>只有上架的商品才会在前台显示出来，客户是无法看到下架商品</span>
          </div>
        </div>
        <div class="m-50-t">
          <div class="app-row">
            <span class="title bold width-140 align-right">商品销售类型:</span>
            <el-radio v-model="point_category_radio" label="default">非积分商品</el-radio>
            <el-radio v-model="point_category_radio" label="code">商品赠送积分</el-radio>
            <el-radio v-model="point_category_radio" label="costpoint">积分兑换商品</el-radio>
          </div>

        </div>
        <div v-if="point_category_radio!='default'" class="flex m-50-t a-i-c">
          <span class="title bold width-100 align-right">{{ point_category_radio == "code" ?'赠送': point_category_radio == "costpoint"?'抵扣':'' }}积分:</span>
          <div>
            <el-input v-model="good_point" class="width-150" type="number" />
          </div>
        </div>
        <div class="annotation m-30-t m-114-l">
          <span>选择商品是否为积分商品，并设置积分</span>
        </div>
        <div class="m-50-t">
          <div class="app-row">
            <span class="title bold width-100 align-right">商品规格:</span>
            <div
              v-for="(item, index) in specification_list"
              :key="item.index"
              class="item-specification"
              @click="specification_delete(index)"
            >
              {{ item.name }}</div>
            <el-button type="primary" class="m-50-l" @click="specification_add">添加规格</el-button>
          </div>
        </div>
        <div class="m-50-t">
          <div class="app-row">
            <span class="title bold width-100 align-right">是否共享:</span>
            <el-radio v-model="share_radio" label="1">是</el-radio>
            <el-radio v-model="share_radio" label="2">否</el-radio>
          </div>
          <div class="annotation m-10-t m-114-l">
            <span>商城平台的商品可以被商家复制共享</span>
          </div>
        </div>
        <div class="m-50-t">
          <div class="flex">
            <span class="title bold width-100 align-right">分销设置:</span>
            <div class="">
              <div class="app-row">
                <el-radio v-model="distribution_radio" label="1">无</el-radio>
                <el-radio v-model="distribution_radio" label="2">比率</el-radio>
                <el-radio v-model="distribution_radio" label="3">固定值</el-radio>
              </div>
              <div v-if="distribution_radio!='1'" class="m-30-t">
                <div class="flex a-i-c">
                  <span class="width-150">一级分类：</span>
                  <el-input v-model="distribution_first_class" />
                </div>
                <div class="flex a-i-c m-20-t">
                  <span class="width-150">二级分类：</span>
                  <el-input v-model="distribution_second_class" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="m-50-t">
          <div class="app-row">
            <span class="title bold width-100 align-right">首页显示:</span>
            <el-radio v-model="index_radio" :label="0">否</el-radio>
            <el-radio v-model="index_radio" :label="1">是</el-radio>
          </div>

        </div>

        <div class="m-50-t">
          <div class="flex">
            <span class="title bold width-100 align-right">配送设置:</span>
            <div>
              <el-radio v-model="freight_radio" label="1">无</el-radio>
              <el-radio v-model="freight_radio" label="2">比率</el-radio>
              <el-radio v-model="freight_radio" label="3">固定值</el-radio>
              <div v-if="freight_radio!=1" class="flex a-i-c m-30-t">
                <span class="width-150">配送价格：</span>
                <el-input v-model="delivery_price" />
              </div>
            </div>
          </div>
          <!-- <div class='annotation m-10-t m-114-l'>
            <span>是否免运费</span>
          </div> -->
        </div>
        <!-- <div class='flex m-50-t'>
          <span class="title bold width-100 align-right">附属数据:</span>
          <el-row :gutter="20" class="flex-1">
            <el-col :span="6">
              <div style="margin-left: 15px;">购买成功增加积分</div>
              <el-input class="m-20-t" v-model="score_value"></el-input>
            </el-col>
            <el-col :span="6">
              <div style="margin-left: 15px;">排序</div>
              <el-input class="m-20-t" v-model="sort_value"></el-input>
            </el-col>
            <el-col :span="6">
              <div style="margin-left: 15px;">计件单位显示</div>
              <el-input class="m-20-t" v-model="unit_value"></el-input>
            </el-col>
            <el-col :span="6">
              <div style="margin-left: 15px;">购买成功增加经验值</div>
              <el-input class="m-20-t" v-model="exp_value"></el-input>
            </el-col>
          </el-row>
        </div> -->
        <div class="flex m-50-t">
          <span class="title bold width-100 align-right">基本数据:</span>
          <el-row class="flex-1">
            <el-col :span="5">
              <div style="margin-left: 15px;">商品编号</div>
              <el-input v-model="num_value" class="m-20-t" style="width: 150px" />
            </el-col>
            <el-col :span="3">
              <div style="margin-left: 15px;">库存</div>
              <el-input v-model="storage_value" class="m-20-t" style="width: 100px" />
            </el-col>
            <el-col :span="4">
              <div style="margin-left: 15px;" type="number">市场价格</div>
              <el-input v-model="market_value" class="m-20-t" style="width: 150px" />
            </el-col>
            <el-col :span="6">
              <div style="margin-left: 15px;">销售价格</div>
              <el-input v-model="sale_value" class="m-20-t" style="width: 150px" type="number" />
              <el-button type="danger" icon="el-icon-user" class="m-10-l" @click="show_vip_dialog">会员价格</el-button>
            </el-col>
            <el-col :span="3">
              <div style="margin-left: 15px;">成本价格</div>
              <el-input v-model="cost_value" class="m-20-t" style="width: 150px" type="number" />
            </el-col>
          </el-row>
        </div>

        <!-- <div class='app-row m-30-t'>
          <span class="title bold width-100 align-right">商品模型:</span>
          <el-select class='flex-1' v-model="orz_value" placeholder="请选择模型"></el-select>
        </div> -->
        <!-- <div class='annotation m-10-t m-114-l'>
          <span>可以加入商品扩展属性，比如：型号，年代，款式..</span>
        </div>
        <div class='app-row m-50-t'>
          <span class="title bold width-100 align-right">商品推荐:</span>
          <el-checkbox-group v-model="recommend_list">
            <el-checkbox label="最新商品"></el-checkbox>
            <el-checkbox label="特价商品"></el-checkbox>
            <el-checkbox label="热卖商品 "></el-checkbox>
            <el-checkbox label="推荐商品" ></el-checkbox>
          </el-checkbox-group>
        </div> -->
        <!-- <div class='app-row m-30-t'>
          <span class="title bold width-100 align-right">商品品牌:</span>
          <el-select class='flex-1' v-model="orz_value" placeholder="请选择品牌"></el-select>
        </div> -->
        <div class="app-row m-30-t">
          <span class="title bold width-100 align-right">商品相册:</span>
          <el-upload
            class="upload-demo"
            :action="save_file_url"
            :on-preview="open_preview"
            :file-list="file_list"
            :on-success="get_img_id"
            list-type="picture-card"
            multiple
          >
            <i class="el-icon-plus" />
            <!-- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> -->
          </el-upload>
        </div>
        <div class="annotation m-10-t m-114-l">
          <span>第一张图片为缩略图,其它图片为轮播图,建议像素750*750,可拖拽使其改变顺序，最多支持上传9张</span>
        </div>

      </el-tab-pane>
      <el-tab-pane label="描述" name="second">
        <div class="app-row m-30-t">
          <span class="title bold align-right width-150 ">商品详情文字:</span>
          <el-input v-model="text_detail" type="textarea" class="m-50-l flex-1" :rows="4" placeholder="请输入内容" />
        </div>
        <div class="app-row m-30-t">
          <span class="title bold align-right width-150">商品详情图片:</span>

          <el-upload
            class="upload-demo"
            :action="save_file_url_detail"
            :on-preview="open_preview"
            :on-remove="handle_remove_detail"
            :file-list="file_list_detail"
            :on-success="get_img_id_detail"
            list-type="picture-card"
            multiple
          >
            <i class="el-icon-plus" />
          </el-upload>
        </div>
      </el-tab-pane>
      <el-tab-pane label="营销选项" name="third">
        <div class="app-row m-20-t">
          <span class="title bold width-100 align-right">SEO关键词:</span>
          <el-input class="flex-1" />
        </div>
        <div class="app-row m-20-t">
          <span class="title bold width-100 align-right">SEO描述:</span>
          <el-input class="flex-1" type="textarea" :rows="2" />
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="app-row j-c-c m-100-t">
      <el-button type="success" @click="add_button">添加商品</el-button>
    </div>
    <el-dialog
      title="选择分类"
      :visible.sync="dialog_visible"
      width="60%"
    >
      <div class="category-container">
        <div
          v-for="(item) in goods_category_list"
          :key="item.index"
          class="category-item"
          :data-id="item.id"
          :class="[chosen_category_id.indexOf(item.id) >= 0 ?'chosen-category-item':'']"
          @click="changing_category"
        >
          {{ item.name }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_visible = false">取 消</el-button>
        <el-button type="primary" @click="dialog_visible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加规格"
      :visible.sync="if_show_specification_box"
    >
      <div class="flex m-30-t a-i-c">
        <div class="width-100">规格名称:</div>
        <el-input v-model="specification_name" class="width-100 m-30-l" />
      </div>
      <div class="flex m-30-t a-i-c">
        <div class="width-100">销售价格</div>
        <el-input v-model="specification_sell_price" class="width-100 m-30-l" />
      </div>
      <div class="flex m-30-t a-i-c">
        <div class="width-100">市场价格</div>
        <el-input v-model="specification_market_price" class="width-100 m-30-l" />
      </div>
      <div class="flex m-30-t a-i-c">
        <div class="width-100">成本价格</div>
        <el-input v-model="specification_cost_price" class="width-100 m-30-l" />
      </div>
      <div class="flex m-30-t a-i-c">
        <div class="width-100">库存</div>
        <el-input v-model="specification_store_nums" class="width-100 m-30-l" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="if_show_specification_box = false">取 消</el-button>
        <el-button type="primary" @click="confirm_specification_add">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="会员价格"
      :visible.sync="if_show_vip_dialog"
    >
      <div class="flex m-30-t a-i-c">
        <div class="width-100">钻石会员价格：</div>
        <el-input v-model="group1_sell_price" class="width-100 m-30-l" />
      </div>
      <div class="flex m-30-t a-i-c">
        <div class="width-100">铂金会员价格：</div>
        <el-input v-model="group2_sell_price" class="width-100 m-30-l" />
      </div>
      <div class="flex m-30-t a-i-c">
        <div class="width-100">黄金会员价格：</div>
        <el-input v-model="group3_sell_price" class="width-100 m-30-l" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="if_show_vip_dialog = false">取 消</el-button>
        <el-button type="primary" @click="if_show_vip_dialog = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="if_open_preview_dialog"
      width="30%"
    >
      <img width="100%" :src="target_image_preview_url" alt="">
    </el-dialog>

    <div style="height: 500px" />
  </div>

</template>

<script>
import goods_category_request from '@/api/goods_category_request'
import goods_request from '@/api/goods_request'
import host_one from '@/api/host/host'
import shop_request from '@/api/shop_request'

// import tinymce from 'tinymce/tinymce'
// import 'tinymce/themes/modern/theme'
// import editor from '@tinymce/tinymce-vue'
export default {
  name: 'GoodsAdd',
  components: {
  },
  data() {
    return {
      dialog_visible: false,
      text_detail: '',
      file_list: [],
      goods_category_list: [],
      activeName: 'first',
      name_value: '',
      current_size: 10,
      current_page: 1,
      key_word: '',
      putaway_radio: 1,
      share_radio: '2',
      freight_radio: '1',
      point_category_radio: 'default',
      score_value: 0,
      num_value: '',
      storage_value: 100,
      market_value: '',
      sale_value: 0,
      cost_value: '',
      index_radio: 0,
      orz_value: '',
      sort_value: 99,
      unit_value: '堂',
      exp_value: 0,
      chosen_category_id: [],
      // nacessary_data: false,
      recommend_list: [],
      editorText: '', // 双向同步的变量
      editorTextCopy: '', // content-change 事件回掉改变的对象,
      save_file_url: '',
      img_id_list: [],
      img_id_list_detail: [], // 调取uploadfile后，返回的包含图片地址的数组
      img_url_list_detail: '', // 对img_id_list_detail数组里的图片地址进行处理，得到一个用逗号拼接而成的包含所有图片地址的字符串
      goods_content: '',
      specification_radio: '1',
      specification_list: [],
      if_show_specification_box: false,
      specification_name: '',
      specification_sell_price: 0,
      specification_market_price: 0,
      specification_cost_price: 0,
      specification_store_nums: 0,
      if_show_vip_dialog: false,
      group1_sell_price: 0,
      group2_sell_price: 0,
      group3_sell_price: 0,
      distribution_radio: '1',
      distribution_first_class: '',
      distribution_second_class: '',
      distribution_third_class: '',
      delivery_price: '',
      keyword_value: '',
      if_open_preview_dialog: false,
      target_image_preview_url: [],
      good_point: 0,
      file_list_detail: [],
      shop_list: [],
      shop_value: '',
      shop_id: 0
    }
  },
  created() {
    this.get_goods_category()
    this.save_file_url = host_one + '/savefile'
    this.save_file_url_detail = host_one + '/savefile'
    this.get_shop_list()
  },
  mounted() {

  },
  methods: {
    choose_shop(e) {
      this.shop_id = e
    },
    get_shop_list() {
      this.listLoading = true
      const params = {
        pageSize: 10,
        page: 1
        // name: this.keyword
      }
      shop_request.shop_list(params, res => {
        this.listLoading = false,
          this.shop_list = res.data
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    get_img_id(res, file, file_list) {
      this.img_id_list = file_list
    },
    show_vip_dialog() {
      this.if_show_vip_dialog = true
    },

    setting_classify() {
      this.dialog_visible = true
    },
    specification_add() {
      this.if_show_specification_box = true
    },
    specification_delete(index) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.specification_list.splice(index, 1)
      }).catch(err => err)
    },
    confirm_specification_add() {
      const specification = {
        name: this.specification_name,
        sell_price: this.specification_sell_price,
        market_price: this.specification_market_price,
        cost_price: this.specification_cost_price,
        store_nums: this.specification_store_nums
      }
      // let specification_list = this.specification_list
      // specification_list.push(specification)
      // this.specification_list = specification_list
      this.specification_list.push(specification)
      this.if_show_specification_box = false
    },
    get_goods_category() {
      this.listLoading = true
      const params = {
        pageSize: 100,
        page1: 1
      }
      goods_category_request.goods_category_list(params, res => {
        this.listLoading = false,
          this.goods_category_list = res.data
      })
    },
    handleClick(tab, event) {

    },
    onContentChange(val) {
      this.editorTextCopy = val
    },
    afterChange() {
    },
    load() {

    },
    changing_category(e) {
      const id = Number(e.target.dataset.id)
      const chosen_category_id = this.chosen_category_id
      const index_id = chosen_category_id.indexOf(id)
      if (index_id >= 0) {
        chosen_category_id.splice(index_id, 1)
      } else {
        chosen_category_id.push(id)
      }
    },
    // 添加商品详情图片
    handle_remove_detail(file, file_list_detail) {
      this.get_img_id_detail('', file, file_list_detail)
    },
    get_img_id_detail(res, file, file_list_detail) {
      this.img_id_list_detail = file_list_detail
    },
    get_img_url_list_detail() {
      let img_url_list_detail = this.img_url_list_detail // 初始化img_url_list_detail,保留img_url_list_detail之前的数据
      let count = 0
      // 添加新上传的图片数据
      for (const i of this.img_id_list_detail) {
        img_url_list_detail += i.response.data.url + ','
        count += 1
        if (count == this.img_id_list_detail.length) {
          img_url_list_detail = img_url_list_detail.substr(0, img_url_list_detail.length - 1) // 删除掉最后一位的逗号
        }
      }
      return img_url_list_detail
    },
    open_preview(file) {
      this.if_open_preview_dialog = true
      this.target_image_preview_url = file.url
    },
    open_preview_detail() {

    },
    get_photo_list() {
      const photo_list = []
      for (const i of this.img_id_list) {
        photo_list.push(i.response.data.id)
      }
      return photo_list
    },
    add_button() {
      if (this.name_value == '') {
        this.$message.error('请输入商品名称')
        return
      }
      if (this.market_value == '') {
        this.$message.error('请输入商品市场价格')
        return
      }

      // if (this.num_value == '') {
      //   this.$message.error("请输入商品编号")
      //   return
      // }
      // if (this.sale_value == '') {
      //   this.$message.error("请输入销售价格")
      //   return
      // }

      const params = {
        name: this.name_value,
        // goods_no: this.num_value,
        // model_id: 0,
        sell_price: this.sale_value,
        market_price: this.market_value,
        photo: this.get_photo_list(),
        category: this.chosen_category_id,
        goods_content: this.get_img_url_list_detail(),
        description: this.text_detail,
        product: this.specification_list,
        store_nums: this.storage_value,
        group1_price: this.group1_sell_price,
        group2_price: this.group2_sell_price,
        group3_price: this.group3_sell_price,
        share1_price: this.distribution_first_class,
        share2_price: this.distribution_second_class,
        share3_price: this.distribution_third_class,
        delivery_price: this.delivery_price,
        is_del: this.putaway_radio,
        point: this.good_point,
        cost_price: this.cost_value,
        seller_id: this.shop_id,
        type: this.point_category_radio,
        is_share: this.index_radio
      }
      console.log(params)
      goods_request.add_goods(params, res => {
        this.$router.push('/academic/goods')
      })
    }
    // notice_message() {
    //   this.$message.error()
    // },
  }
}
</script>

<style scoped>
@import "~@/styles/layout.scss";
.category-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
  width: 100%;
  overflow: auto;
}

.category-item {
  margin-top: 30px;
  width: 200px;
  margin-left: 30px;
  border: 1px solid rgb(199, 199, 199);
  text-align:center;
  padding: 10px 10px;
  /* display: flex;
  flex-direction: row; */
}

.category-item:hover {
  background-color: yellow;
  cursor: pointer;
}

.chosen-category-item {
  background-color: yellow;
}
.item-specification {
  margin-left: 20px;
  padding: 10px 20px;
  background-color: rgb(35, 174, 216);
  color: aliceblue;
  border-radius: 30px;

}
</style>
